<template>
    <view :class="'zan-toptips ' + (isShow ? 'zan-toptips--show' : '')" :style="'background-color:' + backgroundColor">{{ content }}</view>
</template>

<script>
'use strict';

var FONT_COLOR = '#fff';
var BG_COLOR = '#e64340';
export default {
    data() {
        return {};
    },
    props: {
        content: String,
        color: {
            type: String,
            default: FONT_COLOR
        },
        backgroundColor: {
            type: String,
            default: BG_COLOR
        },
        isShow: {
            type: Boolean,
            default: false
        },
        duration: {
            type: Number,
            default: 3000
        }
    },
    methods: {
        show: function show() {
            var that = this;
            var duration = this.data.duration;

            if (this._timer) {
                clearTimeout(this._timer);
            }

            this.setData({
                isShow: true
            });

            if (duration > 0 && duration !== Infinity) {
                this._timer = setTimeout(function () {
                    that.hide();
                }, duration);
            }
        },
        hide: function hide() {
            this._timer = clearTimeout(this._timer);
            this.setData({
                isShow: false,
                backgroundColor: BG_COLOR
            });
        }
    }
};
</script>
<style lang="scss">
.zan-toptips {
    display: block;
    position: fixed;
    -webkit-transform: translateZ(0) translateY(-100%);
    width: 100%;
    min-height: 32px;
    top: 0;
    line-height: 2.3;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background-color: #e64340;
    z-index: 110;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.zan-toptips--show {
    -webkit-transform: translateZ(0) translateY(0);
    opacity: 1;
}
</style>
